<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>公告界面</title>
	<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="js/mainJScript.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
	<link rel="stylesheet" href="./css/mainStyle.css"/>
	<link rel="stylesheet" href="https://at.alicdn.com/t/font_2150071_oqmbug6i2f.css"/>
  </head>
  <style>
	 body{
		 width:100%;
		 height:100%;
		 background: url("img/NY.jpg") no-repeat top fixed;
		 background-size: 100%;
		 background-size: cover;
	 }
	 .searchBar{
		 width:100%;
		 height:30%;
		/* border: 2px solid #000000; */
	 }
	 .demoTable{
		 /* border: 1px solid #0000FF; */
		 height:80%;
		 width: 100%;
	 }
	 .container{
	   width: 350px;
	   height: 350px;
	   margin: 10px;
	   padding: 20px;
	   border-radius: 8px;
	   box-shadow: 0 3px 18px rgba(28, 19, 19, 0.5);
	   font-size: 16px;
	 }
	 .layui-form-item{
		 margin: 15px;
	 }
  </style>

  <style type="text/css">
	  table{
		  border-collapse: collapse;/*让靠在一起的单元格只显示一个边框，边框不进行叠加*/
		  width: 100%;
		  color: #fff9ec;
	  }

	  table tr th{
		  border: solid 1px #ccc;
		  height: 30px;
		  width: 200px;
	  }

	  table tr td{
		  border: solid 1px #ccc;
		  height: 30px;
		  text-align: center;
	  }

	  table tr:hover
	  {
		  background-color: red;/*hover:鼠标移上去就会变成红色*/
	  }
  </style>
  <body>
	  <!-- 搜索开始-->
	  <div class="searchBar">
		<form class="layui-form" action="">
			  <div class="layui-form-item">
		          <div class="layui-input-inline">
		            <input type="text" class="layui-input" name="title" id="title" placeholder="公告标题"/>
		          </div>
		          <div class="layui-input-inline">
		            <input type="text" class="layui-input" name="noticeText" id="noticeText" placeholder="公告内容"/>
		          </div>
				  <div class="layui-input-inline" style="width: 100px;">
				    <input type="text"  class="layui-input" name="createTime" id="createTime" placeholder="发布时间">
				  </div>
				   <div class="layui-input-inline">
				        <button type="submit" class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
				        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
				   </div>
				</div>  
		</form>
	  </div>
	  <!--搜索结束 -->
	  <!-- 数据表格开始-->
	 <div class="demoTable" style="height: 95px !important;">
		  <table class="layui-hide" id="user" lay-filter="user"></table>
	</div>

	  <table border="0" cellspacing="0" cellpadding="0">
		  <tr><th style="width: 25%;">项目成员</th><th style="width: 55%;">项目名：环绿回收<br><br>设计组：细胞重组<br><br>成员：李文国，姜春云，陈旭，姚宇凡，罗航，段佳明，蔡云南</th><th style="width: 17%;">2022-6-30</th><th></th></tr>
		  <tr><td>垃圾回收</td><td>再生资源回收以物资不断循环利用的经济发展模式，正在成为全球潮流。可持续发展的战略，得到大家一致同意。<br>可持续发展就是，既符合当代人类的需求，又不致损害后代人满足其需求能力的发展，是我们在注意经济增长的数量，同时要注意追求经济增长的质量。主要的标志是资源能够永远利用，保持良好的生态环境。</td><td>2022-6-20</td><td></td></tr>
		  <tr><td>友情支持</td><td>昆明理工大学<br>云南大学<br>北京大学<br>重庆大学<br>山西大学</td><td>2022-6-12</td><td></td></tr>
		  <tr><td>赞助商</td><td>李一有限公司<br>姜春云有限公司<br>你好陈旭有限公司<br>坑底不吭宇凡有限公司<br>谁到罗航有限公司<br>佳明有限公司</td><td>2022-6-7</td><td></td></tr>
		  <tr><td>招商建设</td><td>域名购买<br>广告位投放<br>开发者建议<br>培训<br>留言帮助</td><td>2022-6-2</td><td></td></tr>
	  </table>
	<!--数据表格结束  -->
   </body>
<!-- script开始 -->
	<!-- layui开始 -->
	<script src="layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
	layui.use(['table','layer','form','laydate'], function(){
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var laydate=layui.laydate;
			var search;
			
	laydate.render({
			  elem: '#createTime'
			});		
  //方法级渲染
  var tableIns=table.render({
    elem: '#user'
   ,url:'/notice/list'
   ,method:'post'
   ,contentType: 'application/json'
   ,even:true
   ,skin:'row'
   ,where:search
   ,height:'full-120'
	,toolbar: true//开启头部工具栏，并为其绑定左侧模板
    ,cols: [[
		{field:'title', title: '公告标题', width:'25%',align:'center'}
		,{field:'noticeText', title: '公告内容（点击内容查看详情）', width:'55%',align:'center',event:'viewDetail'}
		,{field:'createTime', title: '发布时间',align:'center',width:'17%'}
    ]]
	,page: true
	, parseData: function(res) { //res 即为原始返回的数据
		  return {
			  "code": res.code, //解析接口状态
			  "msg": res.msg, //解析提示文本
			  "count": res.data.total, //解析数据长度
			  "data": res.data.records //解析数据列表
		  };
	  }
	  , response: {
		  statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
	  }
	  ,request: {
    	pageName: "displayStart",
		  limitName: "displayLength"
	  }
	,done:function(res,curr,count){
		console.log(res);
	}
  });
  
	var url;//添加或修改的url;
	var mainIndex;//关闭的弹出层索引
  //打开添加页面
  function openAddUser(){
  	  mainIndex=layer.open({
  	    type: 1, 
  	    title:"添加需要回收的垃圾",
  	    content: $("#saveOrUpdate"),/* '传入任意的文本或html' *///这里content是一个普通的String
  	   area:['410px','460px'],
/* 		area:'auto', */
/* 		move:false, */
	/* 	shadeClose:true, */
		anim:5,
		resize:false,
/* 		scrollbar: false, */
		success:function(index){
			$("#adOrUpForm")[0].reset();
			url="/garbage/updateOrAdd";
		}
  	  });
  }
 
  //打开修改页面
  function openUpdateUser(data){
  	  mainIndex=layer.open({
  	    type: 1, 
  	    title:"添加需要回收的垃圾",
  	    content: $("#saveOrUpdate"),/* '传入任意的文本或html' *///这里content是一个普通的String
  	    area:['410px','460px'],
		anim:5,
		resize:false,
		scrollbar: false,
  		success:function(index){
  			form.val("adOrUpForm",data);
			url="/garbage/updateOrAdd";
  		}
  	  });
  }
  /*添加或修改垃圾表单提交 */
  form.on('submit(addOrUpGarb)', function(data){
         //序列化表单数据
		  var params= $("#adOrUpForm").serialize();
		  layer.alert(params, {
            title: '最终的提交信息'
          })
          $.ajax({
            url:url,
            method:'POST',
            contentType: 'application/json',
            async:false,
            data:JSON.stringify(data.field),
            success: function(res) {
  				layer.alert(res.msg, {
  					end: function(){
  							if (res.code == 200) console.log("success");
            	         }
            	    })
					layer.close(mainIndex);
					tableIns.reload();
            	}
			
            })
            return false;
        });

/*搜索表单提交 */
  form.on('submit(search)', function(data){
		table.reload('user',{
			where: data.field,
			page:{
				curr :1,
			},
		})
	  return false;
        });

  //删除方法
  function del(codeId) {
	  layer.confirm("您确定要删除吗？",function(){
		  $.ajax({
			  type:"DELETE",
			  url: '/garbage/deleteByIds',
			  contentType:'application/json',
			  data:JSON.stringify({"ids":codeId}),
			  success:function (data) {
				  layer.closeAll('loading');
				  if(data.code==200){
					  layer.msg('删除成功！', {icon: 1,time:2000,shade:0.2});
					  location.reload(true);
				  }else{
					  layer.msg('删除失败！', {icon: 2,time:3000,shade:0.2});
				  }
			  }
		  })
	  })
  }

 //批量删除 Start
   function getCheckData(){
    var checkStatus = table.checkStatus('user');
    if(checkStatus.data.length==0){
     layer.msg('请先选择要删除的数据行！', {icon: 2});
     return;
    }
    var codeId = [];
    for(var i=0;i<checkStatus.data.length;i++){
    	if(checkStatus.data[i].status == 0){
			codeId.push(checkStatus.data[i].id);
		}else{
    		layer.msg("出库垃圾，不可删除");
		}
    }
   	del(codeId);
  };
//批量删除 End

 //头工具栏事件
  table.on('toolbar(user)', function(obj){
	var checkStatus=table.checkStatus(obj.config.id);
	var data=checkStatus.data;
    switch(obj.event){
      case 'add':
		openAddUser(); 
		break;
      case 'deleteAll':
		getCheckData();
		break;
      /* //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
      break; */
    };
  })

//监听行工具事件
  table.on('tool(user)', function(obj){
	var data = obj.data; //获得当前行数据
	var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    if(layEvent === 'viewDetail'){
    	layer.open({
    				type: 1, 
    				title:"公告详情",
    				/* id:"noticeFrame", *///设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式
    				content: '<div style="width:80%;height:90%;margin:10px auto;"><div style="font-size: 2em;line-height: 1.5em;margin-bottom:2em;color: #123;font-weight: bold;">'+data.title+'</div><pre style="font-size:1.2em; margin_bottom:20px;">' + data.noticeText + '</pre></div>',/* '传入任意的文本或html' *///这里content是一个普通的String
    	    		area:['70%','70%'],
    	    		anim:5,
    	    		resize:false,
    				shadeClose:true,
    				success:function(layero, index){
    	/* 					showNotice(data.title,data.noticeText); */
    					}
    	    		/* end: function(){ 
    	    				tableIns.reload();
    	    				tableIns1.reload();
    	    			}, */
    	    	});
    }
  })

});
</script>
</html>